<!--
* @description 
* @fileName category.vue
* @author huangyu
* @date 2023/03/04 11:39:12
!-->
<template>
    <div>
        <van-field
            v-model="fieldValue"
            is-link
            readonly
            label="已选择"
            placeholder="请选择所在地区"
            @click="show = true"
            />
        <van-cascader
            v-model="cascaderValue"
            title="选择分类"
            :options="options"
            @finish="onFinish"
            :field-names="fieldNames"
        />
    </div>
</template>

<script>
import { get } from '@/common/app.js'
export default {
    components: {},
    data() {
        return {
            options: [],
            fieldNames: {
                text: 'label',
            },
            show: true,
            fieldValue: "",
            cascaderValue: "",
            changeData:{},
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        onFinish({  value, selectedOptions, tabIndex }) {
            // console.log( value, selectedOptions, tabIndex)
            let id = value=='all'?"":value
            let parentId = tabIndex>1?selectedOptions[tabIndex-1].value:""
            this.fieldValue = selectedOptions.map((option) => option.label).join('/');
            this.changeData = {id:id,parentId:parentId,fieldValue:this.fieldValue}
            this.$emit('change',this.changeData)
        },
        getData() {
            let params = {
                type: 'getCategory',
                data: {},
            }
            get('game', params).then(res => {
                if (res) {
                    this.options = res.data
                    // 最前面插入 全部的数据
                    let unshiftArr = {label: "全部",value: "all"}
                    this.options.unshift(unshiftArr)
                    this.options[1].value = '1101'
                    this.options[2].value = '1102'
                    this.options[3].value = '1103'
                }
            })
        },
    },
}
</script>

<style scoped>

</style>